import React, { Component } from 'react'
import {withRouter} from "react-router-dom"
import { UserOutlined, EyeOutlined } from '@ant-design/icons'
import { list, photo, value, ps, nav, } from "./login.module.css"
import { Modal, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
import axios from 'axios';
import Buttonn from "./ajax.js"

import { connect } from "react-redux"
import { loginer, token } from "../../../../../redux/login/action.js"

const alert = Modal.alert;
const showAlert = () => {
    const alertInstance = alert('Delete', 'Are you sure???', [
        { text: 'Cancel', onPress: () => console.log('cancel'), style: 'default' },
        { text: 'OK', onPress: () => console.log('ok') },
    ]);
    setTimeout(() => {
        // 可以调用close方法以在外部close
        console.log('auto close');
        alertInstance.close();
    }, 500000);
};
class login extends Component {
    componentDidMount() {
        console.log(this)
    }
    state = {
        username: "",
        password: "",
        flag: false,
        flagg: false,
        yanzm: true,
        huoqu: false,
        num: 60,
        eye: true,
    }
    change = (e) => {
        const reg = /^1[3456789]\d{9}$/;
        let { value } = e.target
        if ((reg.test(value))) {
            this.setState({
                username: value,
                flag: false,
                flagg: true,
                // huoqu: true,
            })
        } else {
            this.setState({
                flag: true,
                flagg: false,
                username: value
            })
        }
    }
    changer = (e) => {
        let { value } = e.target
        let zz = /^([0-9]{4})$/
        if (zz.test(value)) {
            this.setState({
                password: value,
                huoqu: true
            })
        } else {
            this.setState({
                password: value,
                huoqu: false
            })
        }
    }
    huoqu = () => {
        // 进行 获取验证码操作
        let flag = this.state.flagg
        let panduan = true
        if (flag) {
            if (panduan) {
                panduan = false
                let phone = this.state.username
                //    (phone);
                // axios获取 
                console.log(phone)
                const headerJSON = {
                    "Content-Type": "application/json;charset=UTF-8"
                };
                axios({
                    url: "/api/code",
                    method: "post",
                    headers: headerJSON,
                    data: JSON.stringify({ phone })
                }).then((res) => {
                    console.log(res)
                    this.setState({
                        yanzm: false,
                    })
                })
            }
            var timer = setInterval(() => {
                this.setState({
                    num: this.state.num - 1
                })
                if (this.state.num === 0) {
                    clearInterval(timer)
                    this.setState({
                        yanzm: true,
                        num: 60,
                    })
                }
            }, 1000);
        }
    }
    login = () => {
        let flag = this.state.huoqu
        let kaiguan = true
        if (flag) {
            kaiguan = false
            let { username, password } = this.state
            // axios 获取
            const headerJSON = {
                "Content-Type": "application/json;charset=UTF-8"
            };
            axios({
                url: "/api/login",
                method: "post",
                headers: headerJSON,
                data: JSON.stringify(
                    { phone: username, verified: password }
                )
            }).then((res) => {
                if (res.data.bean.code == "1") {
                    this.props.token(res.data.token)
                    this.props.loginer(res.data.user)
                    alert('登录成功', '请点击OK跳转到首页', [
                        { text: 'Ok', onPress: () => this.props.history.replace("/home") },
                    ])
                } else {
                    alert('登录失败', '手机号与验证码不匹配', [
                        { text: 'Ok', onPress: () => "" },
                    ])
                }
            })
            console.log("登录验证")
        }
    }
    render() {
        return (
            <>
                {this.state.flag ? <div>请输入正确的手机号</div> : <></>}
                <ul className={list}>
                    <li className={photo}>
                        <UserOutlined />
                    </li>
                    <li className={value}>
                        <input
                            name="username"
                            onChange={(e) => this.change(e)}
                            value={this.state.username}
                            placeholder="请输入手机号">
                        </input>
                    </li>
                    <li className={ps}></li>
                </ul>
                <ul className={list}>
                    <li className={photo}>
                        <EyeOutlined />
                    </li>
                    <li className={value}>
                        <input
                            name="password"
                            onChange={(e) => this.changer(e)}
                            value={this.state.password}
                            placeholder="请输入验证码">
                        </input>
                    </li>
                    {
                        this.state.yanzm ?
                            <li onClick={() => this.huoqu()} className={ps}>
                                获取验证码
                            </li> :
                            <li className={ps}>{this.state.num}</li>
                    }
                </ul>
                <div className={nav}> 未注册的手机号将自动注册为品房网账号</div>
                <div>
                    <Buttonn login={this.login} />
                </div>

            </>
        )
    }
}

export default connect(
    state => ({
    }),
    {
        loginer,
        token
    }
)(withRouter(login))